<template>
  <div class="box">
    <!-- 教师信息-->
    <el-form :inline="true" :model="formInline" class="add demo-form-inline">

      <div style="display: flex;" class="big">
        <el-form-item label="姓名" class="uzname">
          <el-input class="search" v-model="formInline.user" placeholder="搜索  教师"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="chaxun">查询</el-button>
        </el-form-item>
      </div>

      <el-button class="posuy" type="primary" @click="addStudent">+添加 教师</el-button>
    </el-form>
    <el-table :data="tableData.slice((currentPage - 1)*pageSize,currentPage*pageSize)" border height="500" style="width: 100%" class="dis">
      <el-table-column fixed prop="date" label="入职日期" width="150">
      </el-table-column>
      <el-table-column prop="name" label="姓名" :label-width="formLabelWidth" width="120">
      </el-table-column>
      <el-table-column prop="province" label="性别" width="120">
      </el-table-column>
      <el-table-column prop="city" label="部门" width="120">
      </el-table-column>
      <el-table-column prop="address" label="现居住地址" width="300">
      </el-table-column>
      <el-table-column prop="zip" label="联系电话" width="120">
      </el-table-column>

      <!-- 操作-->
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <!-- 查看-->
          <!-- <el-button type="info" size="mini"@click="open">查看</el-button> -->
          <!-- 编辑-->
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="addStudent"></el-button>
          <!-- 删除-->
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteRow(scope.$index, tableData)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="prev, pager, next" :total="100">
    </el-pagination>
<<<<<<< HEAD
=======
    <!-- </el-dialog> -->
>>>>>>> bb20d8e70ababd6dfb9ee9450b8ec76ad4fb596a
    <!-- 添加教师弹窗区域 -->
    <el-dialog :title="state ? '修改教师信息' : '添加教师信息'" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="add">
        <el-form-item label="入职日期" :label-width="formLabelWidth">
          <el-col :span="11" class='wid'>
            <el-date-picker type="date" placeholder="选择日期" v-model="add.date" style="width: 390px;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="姓  名" :label-width="formLabelWidth" >
          <el-input v-model="add.name" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" v-model="add.province">
           <el-radio-group v-model="add.province" class="xinbei">
            <el-radio  label="男">男</el-radio>
            <el-radio  label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-select  v-model="add.city" placeholder="请选择班级" style="width: 390px;">
            <el-option label="前端五班" value="前端五班"></el-option>
            <el-option label="数据分析" value="数据分析"></el-option>
            <el-option label="后端五班" value="后端五班"></el-option>
            <el-option label="框架四班" value="框架四班"></el-option>
            <el-option label="测试五班" value="测试五班"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="居住地址" :label-width="formLabelWidth" >
          <el-input v-model="add.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input :span="11"  v-model="add.zip" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="adda">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑教师信息弹出框 -->
    <el-dialog title="请编辑信息" :visible.sync="dialogFormVisible" width="500px" center>
      <el-form :model="add">
        <el-form-item label="入职日期" :label-width="formLabelWidth">
          <el-col :span="11" class='wid'>
            <el-date-picker type="date" placeholder="选择日期" v-model="add.date" style="width: 390px;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="姓  名" :label-width="formLabelWidth" >
          <el-input v-model="add.name" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" v-model="add.province">
           <el-radio-group v-model="add.province" class="xinbei">
            <el-radio  label="男">男</el-radio>
            <el-radio  label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-select  v-model="add.city" placeholder="请选择班级" style="width: 390px;">
            <el-option label="前端五班" value="前端五班"></el-option>
            <el-option label="数据分析" value="数据分析"></el-option>
            <el-option label="后端五班" value="后端五班"></el-option>
            <el-option label="框架四班" value="框架四班"></el-option>
            <el-option label="测试五班" value="测试五班"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="居住地址" :label-width="formLabelWidth" >
          <el-input v-model="add.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input :span="11"  v-model="add.zip" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="adda">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 0
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 1
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 2
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 3
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 4
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 5
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 6
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 7
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 8
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 9
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 10
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 11
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 12
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 13
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 14
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '女',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 15
          },
        ],
        formInline: {
          user: '',
          region: ''
        },
        //教师信息添加弹出框数据
        add:{
          date: '',
          name: '',
          province: '',
          city: '',
          address: '',
          zip: ''
        },
        state: false,
        // tableDataa: [],
        dialogFormVisible: false,
        form: {},
        formLabelWidth: '70px',

        // 分页的参数
        total: this.total,
        currentPage: 1, //当前页数
        pageSize: 10 // 每页显示条数
      }

    },
    // computed:{
    //   pages: function () {
    //     return
    //   }
    // },
    methods: {
      sure() {
        if (this.state) {
          //调用修改接口
          this.service.put('接口地址', this.form)
            .then(res => {

            })
            .catch(err => {
              console.log(err)
            })
        } else {
          //调用新增接口
          this, service.post('接口地址', this.form)
            .then(res => {

            })
            .catch(err => {
              console.log(err)
            })
        }
        this.dialogFormVisible = false
      },
      //添加教师数据
      addStudent() {
        this.state = false
        this.form = {
          sex: '1'
        }
        //点击弹出添加数据
        this.dialogFormVisible = true
        this.adda.number = this.resdata.length +1;
      },
      // handleClick(row) {
      //   console.log(row);
      // },
        deleteRow(index, rows) {/* 删除 */
              var newPage = index+(this.currentPage-1)*10;
              console.log(newPage)
              rows.splice(newPage, 1);
            },
        /* 查看 */
      open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
      /* 分页器*/
      handleSizeChange(val) {
      	this.pageSize = val
      	this.currentPage = 1
      	// console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
      	this.currentPage = val
      	console.log(`当前页: ${val}`);
      },
      // add (){
      // },
      // 点击确定向表中添加数据
      adda (){
        this.dialogFormVisible = false;
        this.tableData.push(this.add);
        this.add = {
             date: '',
             name: '',
             province: '',
             city: '',
             address: '',
             zip: ''
            }
      }

    }

  }
</script>

<style>
  div {
    text-align: center;
  }

  .box {
    box-shadow: 0px 0px 10px #409EFF;
    padding: 20px;
    background-color: #E9EEF3;
    padding-bottom: 65px;
    /* overflow-y: auto; */
  }

  .uzname {

    text-align: right;
  }

  .el-form--inline {

    text-align: left;
    display: flex;
  }

  .el-form-item.uzname {

    display: flex;
    font-size: 16px;
  }

  /* .el-button--primary {

    width: 80px;
    height: 40px;
    text-align: center;
  } */
  .chaxun {
    width: 80px;
    height: 40px;
    text-align: center;
  }

  .add {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .search {
    margin: 0 auto;
  }

  .posuy {
    height: 40px;
    width: 100px;
  }

  .dis {
    box-shadow: 0px 2px 20px #E9EEF3;
    margin-bottom: 10px;
  }

  .chakan {
    background-color: blue;
    width: 50px;
    color: #fff;
  }
  .xinbei{
    margin-right: 260px;
  }
</style>
